<template>
  <div class="body" v-if="detailsData">
    <!-- 指令 -->
    <!--    <detail-header v-scroll="30">-->
    <detail-header :scrollDown="this.scrollDown">
      {{ detailsData.name }}
    </detail-header>
    <!-- <img :src="detailsData.poster" alt=""> -->
    <div :style="{
      backgroundImage: 'url(' + detailsData.poster + ')'
    }" class="poster"></div>

    <div class="info">
      <div class="title">
        <span class="name">{{ detailsData.name }}</span>
        <span class="filmType">{{ detailsData.filmType.name }}</span>
        <span class="grade" v-show="detailsData.grade"><i>{{ detailsData.grade }}</i>分</span>
      </div>
      <div class="text">
        <div class="category">
          {{ detailsData.category }}
        </div>
        <div class="premiereAt">
          {{ detailsData.premiereAt | timeFilter }}上映
        </div>
        <div class="nation">
          {{ detailsData.nation }}&nbsp
          |&nbsp
          {{ detailsData.runtime }}分钟
        </div>
        <div class="synopsis" :class="synopsisShow?'hidden':''">
          {{ detailsData.synopsis }}
        </div>
        <div class="synopsisShow">
          <i class="iconfont" @click="synopsisShow=!synopsisShow"
             :class="synopsisShow?'icon-icon_jiantou-xia':'icon-icon_jiantou-shang'"></i>
        </div>
      </div>
    </div>

    <div class="back-line"></div>

    <div class="actors-info">
      <div class="title">演职人员</div>
      <detail-swiper name="actors">
        <detail-swiper-item class="avatar" v-for="(item,index) in detailsData.actors" :key="index">
          <div
            :style="{
              backgroundImage: 'url(' + item.avatarAddress + ')',
            }"
            class="avatar-img">
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="role">{{ item.role }}</div>
        </detail-swiper-item>
      </detail-swiper>
    </div>

    <div class="back-line"></div>

    <div class="photos-info">
      <div class="title">剧照</div>
      <detail-swiper name="photos" class="photos-swiper">
        <!-- 为了解决swiper冲突，需要传递专属name过去DetailSwiper -->
        <detail-swiper-item class="photo" v-for="(item,index) in detailsData.photos" :key="index">
          <div
            :style="{
              backgroundImage: 'url(' + item + ')',
            }"
            class="photo-img" @click="handlePreview(index)">
          </div>
        </detail-swiper-item>
      </detail-swiper>
    </div>

    <div class="back-line"></div>

    <!-- footer -->
    <div class="footer">
      <div class="button--bottom-container">
        <div class="button" @click="handleFilmsCinemas(detailsData.filmId,detailsData.name)">特惠购票</div>
      </div>
      <div class="button-bottom"></div>
    </div>
  </div>
</template>
<script>
import http from "@/util/http";
import myMixin from "@/util/myMixin";
import Vue from "vue";
import {mapMutations} from "vuex";
import moment from 'moment'
import detailSwiper from '@/components/detail/DetailSwiper'
import detailSwiperItem from '@/components/detail/DetailSwiperItem'
import detailHeader from '@/components/detail/DetailHeader'

import {ImagePreview} from 'vant';  // 这些都不是组件，是方法，所以需要引入

// moment.locale('zh-cn')   // 设置成中文
// console.log(moment().format('YYYY-MM-DD'))
Vue.filter("timeFilter", (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})

// let scrollDown = false;
// // 指令
// Vue.directive("scroll", {
//   inserted(el, binding) {
//     // el.style.display = 'none';
//     scrollDown = false
//     window.onscroll = () => {
//       console.log('scroll')
//       scrollDown = (document.documentElement.scrollTop || document.body.scrollTop) > binding.value;
//     }
//   },
//   // 销毁生命周期
//   unbind() {
//     window.onscroll = null
//   }
// })

export default {
  mixins: [myMixin],

  data() {
    return {
      detailsData: null,
      synopsisShow: true,
      scrollDown: false,
    }
  },
  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader,
  },
  methods: {
    ...mapMutations(['changeFilmName','changeFilmId']),

    handlePreview(index) {
      ImagePreview({
        images: this.detailsData.photos, // 预览图片的那个数组
        closeable: true,   // 显示关闭按钮
        closeIconPosition: 'top-left',   // 关闭按钮位置
        showIndex: true,
        loop: false,
        startPosition: index, // 指明预览第几张图
      })
    },
    handleFilmsCinemas(filmId,name){
      this.$router.push(`/filmscinemas/${filmId}`)

      this.changeFilmName(name)
      this.changeFilmId(filmId)
    }
  },
  created() {
    // 当前匹配的路由， this.$router是路由大对象，而this.$route仅是当前匹配的路由
    // console.log("created", this.$route.params.id)

    // axios 利用获取的 id 发起详情信息的请求， 获取详细数据， 布局页面
    // getDetails(this.$route.params.id)
    http.httpForDetail(this.$route.params.id).then(res => {
      // console.log(res.data.data.film)
      this.detailsData = res.data.data.film
    })
  },
  mounted() {
    window.onscroll = () => {
      // console.log('scroll')
      this.scrollDown = (document.documentElement.scrollTop || document.body.scrollTop) > 30;
    }
  },
  destroyed() {
    window.onscroll = null
  },
}
</script>
<style lang="scss" scoped>
.body {
  margin-bottom: 64px;
}

.poster {
  width: 100%;
  height: 2.1rem;
  background-position: center;
  background-size: cover;
}

.info {
  width: 100%;
  height: auto;
  padding: 12px 15px 15px;
  box-sizing: border-box;

  .title {
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    display: flex;
    align-items: center;
    position: relative;

    .name {
      color: #191a1b;
      margin-right: 7px;
    }

    .filmType {
      font-size: 12px;
      line-height: 14px;
      color: #fff;
      padding: 0 2px;
      background-color: #d2d6dc;
      border-radius: 2px;
    }

    .grade {
      font-size: 12px;
      color: #ffb232;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);

      i {
        font-size: 18px;
      }
    }
  }

  .text {
    font-size: 13px;
    color: #797d82;

    div {
      margin-top: 4px;
    }

    .synopsis {
      margin-top: 12px;
      line-height: 18px;
    }

    .hidden {
      overflow: hidden;
      height: 36px;
    }

    .synopsisShow {
      width: 100%;
      text-align: center;

      i {
        display: inline-block;
        color: #979b9f;
        font-size: 8px;
        width: 35px;
        -webkit-transform: scale(0.75); /*针对Chrome 设置字体缩小比例*/
        -o-transform: scale(1); /*针对能识别-webkit的opera browser设置*/
      }
    }
  }
}

.back-line {
  width: 100%;
  height: 10px;
  background-color: #F4F4F4;
}

.actors-info {
  margin-left: 15px;
  box-sizing: border-box;
  overflow: hidden;

  .title {
    height: 22.5px;
    padding: 15px 15px 15px 0;
    line-height: 22.5px;
  }

  .avatar {
    width: 85px;

    .avatar-img {
      width: 85px;
      height: 85px;
      background-position: center;
      background-size: cover;
    }

    .name, .role {
      width: 85px;
      font-size: 12px;
      padding-top: 10px;
      height: 18px;
      line-height: 18px;
      color: #191a1b;
      text-align: center;
      overflow: hidden;
    }

    .role {
      font-size: 10px;
      color: #797d82;
      padding-top: 0;
      margin-bottom: 9px;
    }
  }
}

.photos-info {
  margin-left: 15px;
  box-sizing: border-box;
  overflow: hidden;

  .title {
    height: 32px;
    padding: 15px 15px 15px 0;
    line-height: 32px;
  }

  .photos-swiper {
    height: 1.15rem;

    .photo {
      width: 1.5rem;

      .photo-img {
        width: 1.5rem;
        height: 1rem;
        background-position: center;
        background-size: cover;
      }
    }
  }
}

.footer{
  width: 100%;
  height: 64px;
  background-image: linear-gradient(-180deg,hsla(0,0%,100%,0) 7%,#fff 69%);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;

  .button--bottom-container {
    width: 100%;
    height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .button {
      width: 335px;
      height: 46px;
      box-shadow: 0 2px 6px 0 #eabebc;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(-137deg, #fa3a3d, #f03d37);
      border-radius: 25px;
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #fff;
      box-sizing: border-box;
      z-index: 999;
    }
  }
  .button-bottom {
    width: 100%;
    height: 10px;
  }
}
</style>
